<template>
    <div class="app-wrapper">
        <component :is="LayoutComponents[themeConfig.layout]" />
    </div>
</template>

<script setup>
import { useStore } from 'vuex'
import LayoutVertical from './LayoutVertical/index.vue'
import LayoutClassic from './LayoutClassic/index.vue'
import { reactive } from '@vue/reactivity'
import { computed } from '@vue/runtime-core'
const store = useStore()
const LayoutComponents = {
    vertical: LayoutVertical,
    classic: LayoutClassic
}
const themeConfig = reactive(computed(()=> {
    return store.getters['theme/getThemeConfig']
}))
</script>

<style lang="scss" scoped>
@import "../styles/mixin.scss";

.app-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>
